<template>
  <div class="goods-item">
    <img
      v-lazy='showImgs'
      alt=""
      @load="imgLoaded"
      @click="goDetail(goodsitem.iid || goodsitem.item_id)"
    />
    <div class="content">
      <p class="title">{{ goodsitem.title }}</p>
      <div class="bottom_box">
        <span
          >￥<span class="price">{{ goodsitem.price }}</span></span
        >
        <span class="collect"
          ><img src="~assets/img/common/collect.svg" alt="" />{{
            goodsitem.cfav
          }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsListItem",
  props: {
    goodsitem: Object,
    default() {
      return {};
    },
  },
  created() {
    // console.log(this.goodsitem)
  },
  methods: {
    imgLoaded() {
      this.$bus.$emit("imgLoaded");
    },
    // 跳转到商品详情页
    goDetail(iid) {
      console.log(iid);
      this.$router.push('/detail/' + iid)
    },
  },
  computed:{
    showImgs(){
      return this.goodsitem.image || this.goodsitem.show.img
    }
  }
};
</script>

<style scoped>
.goods-item {
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
}
.goods-item > img {
  width: 100%;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  min-height: 100%;
}
.content {
  padding: 10px 6px;
  box-sizing: border-box;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.content .title {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bottom_box {
  font-size: 12px;
  display: flex;
}
.bottom_box > span {
  margin-right: 5px;
  font-size: 12px;
  flex: 1;
}
.bottom_box .price {
  color: #f00;
  font-size: 16px;
}
span.collect {
  font-size: 14px;
  display: flex;
  width: 50px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.collect img {
  width: 14px;
  height: 14px;
  vertical-align: text-top;
}
</style>